<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_Promise-Promise解决异步处理</title>
  <!-- 
  在 JavaScript 中， `Promise`  是一种用于处理异步操作的对象，它代表了一个可能在未来某个时间点完成或失败的操作及其结果。 `Promise`  的引入极大地改善了异步编程的体验，解决了许多传统回调方式带来的问题。
  1. Promise 的基本概念
  - Promise：一个表示异步操作最终完成（或失败）及其结果值的对象。
  - 状态：Promise 具有三种状态：
    - Pending（待定）：初始状态，既不是成功也不是失败。
    - Fulfilled（已兑现）：表示操作成功完成。
    - Rejected（已拒绝）：表示操作失败。

  2. Promise 的基本用法
  Promise 的基本用法包括创建 Promise、使用  `.then()`  和  `.catch()`  方法处理结果和错误。

  2.1 创建 Promise
  使用  `new Promise()`  构造函数创建一个 Promise 对象。
  const myPromise = new Promise((resolve, reject) => {
      // 异步操作
      setTimeout(() => {
          const success = true; // 模拟成功或失败
          if (success) {
              resolve("Operation successful!"); // 兑现
          } else {
              reject("Operation failed!"); // 拒绝
          }
      }, 1000);
  });
  2.2 处理 Promise 结果
  使用  `.then()`  方法处理成功的结果，使用  `.catch()`  方法处理错误。
  myPromise
      .then(result => {
          console.log(result); // 输出: Operation successful!
      })
      .catch(error => {
          console.error(error); // 输出: Operation failed!
      });
  3. Promise 的优势
  - 避免回调地狱：Promise 使得异步代码的结构更加扁平，避免了多层嵌套的回调函数。
  // 使用 Promise 处理多个异步操作
  fetchData()
      .then(data => {
          return processData(data);
      })
      .then(result => {
          return saveData(result);
      })
      .catch(error => {
          console.error("Error:", error);
      });
  - 更好的错误处理：Promise 提供了统一的错误处理机制，所有的错误都可以通过  `.catch()`  方法捕获。

  - 链式调用：Promise 支持链式调用，使得多个异步操作可以顺序执行。

  4. Promise 的静态方法
  - Promise.all()：用于并行处理多个 Promise，只有当所有 Promise 都成功时才会执行  `.then()` ，如果有任何一个 Promise 失败，则立即执行  `.catch()` 。
  Promise.all([promise1, promise2, promise3])
      .then(results => {
          console.log("All operations successful:", results);
      })
      .catch(error => {
          console.error("One or more operations failed:", error);
      });
  - Promise.race()：用于处理多个 Promise，只要其中一个 Promise 兑现或拒绝，就会立即返回结果。
  Promise.race([promise1, promise2])
      .then(result => {
          console.log("First operation finished:", result);
      })
      .catch(error => {
          console.error("First operation failed:", error);
      });
  5. 总结
  `Promise`  是 JavaScript 中处理异步操作的重要工具，提供了清晰的结构和强大的功能。通过使用  `Promise` ，开发者可以更有效地管理异步操作，避免回调地狱，实现更好的错误处理和链式调用。理解  `Promise`  的用法和优势对于编写现代 JavaScript 代码至关重要。
    -->
</head>
<body>

  <script>
    // 创建一个 Promise 对象
    const promise = new Promise((resolve, reject) => {
      // pedding 状态
      // 异步操作
      setTimeout(() => {
        const success = true; // 假设异步操作成功
        if (success) {
          resolve("操作成功"); // fulfilled 状态
        } else {
          reject("操作失败"); // rejected 状态
        }
      }, 2000);
    });

    // 使用 Promise 对象
    promise
      .then((result) => {
        console.log(result); // 输出: 操作成功
      })
      .catch((error) => {
        console.error(error); // 输出: 操作失败
      });


  </script>
  
</body>
</html>